<template>
  <view class="xen-material-picker">
    <!-- 输入框显示区域 -->
    <view class="picker-input" @click="showPicker">
      <text v-if="selectedText" class="selected-text">{{ selectedText }}</text>
      <text v-else class="placeholder">{{ placeholder }}</text>
      <uni-icons type="search" size="16" color="#999" />
    </view>

    <!-- 全屏弹出层 - 物料列表 -->
    <uni-popup
      ref="listPopup"
      type="center"
      :safe-area="false"
      @change="handleListPopupChange"
    >
      <view class="material-list-popup">
        <XenMaterialList
          :visible="listPopupVisible"
          @select="handleMaterialSelect"
          @close="hideListPicker"
        />
      </view>
    </uni-popup>

    <!-- 全屏弹出层 - 物料详情/型号选择 -->
    <uni-popup
      ref="detailPopup"
      type="center"
      :safe-area="false"
      @change="handleDetailPopupChange"
    >
      <view class="material-detail-popup">
        <XenMaterialDetail
          v-if="selectedMaterial"
          :material="selectedMaterial"
          :visible="detailPopupVisible"
          :isKeyAttribute="isKeyAttribute"
          @confirm="handleModelConfirm"
          @close="hideDetailPicker"
        />
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import XenMaterialList from "./XenMaterialList.vue";
import XenMaterialDetail from "./XenMaterialDetail.vue";
import type { ISysMaterial } from "./type/interface";

interface Props {
  modelValue?: string;
  placeholder?: string;
  isKeyAttribute?: boolean; // 是否只显示关键属性
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (
    e: "change",
    value: string,
    material: ISysMaterial | null,
    model: string,
  ): void;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: "请选择物料",
  isKeyAttribute: false,
});

const emit = defineEmits<Emits>();

// 弹窗引用
const listPopup = ref<any>(null);
const detailPopup = ref<any>(null);

// 弹窗状态
const listPopupVisible = ref(false);
const detailPopupVisible = ref(false);

// 选中的物料
const selectedMaterial = ref<ISysMaterial | null>(null);
const selectedModel = ref<string>("");

// 显示文本
const selectedText = computed(() => {
  if (selectedModel.value) {
    return selectedModel.value;
  }
  return props.modelValue || "";
});

// 显示物料列表选择器
const showPicker = () => {
  listPopupVisible.value = true;
  listPopup.value?.open();
};

// 隐藏物料列表选择器
const hideListPicker = () => {
  listPopup.value?.close();
};

// 隐藏物料详情选择器
const hideDetailPicker = () => {
  detailPopup.value?.close();
};

// 物料列表弹窗状态变化
const handleListPopupChange = (e: any) => {
  if (e.show === false) {
    listPopupVisible.value = false;
  }
};

// 物料详情弹窗状态变化
const handleDetailPopupChange = (e: any) => {
  if (e.show === false) {
    detailPopupVisible.value = false;
  }
};

// 处理物料选择（点击"选择型号"按钮）
const handleMaterialSelect = (material: ISysMaterial) => {
  selectedMaterial.value = material;
  hideListPicker();

  // 延迟打开详情页，确保列表页已关闭
  setTimeout(() => {
    detailPopupVisible.value = true;
    detailPopup.value?.open();
  }, 300);
};

// 处理型号确认
const handleModelConfirm = (model: string) => {
  selectedModel.value = model;
  hideDetailPicker();

  // 触发更新事件
  emit("update:modelValue", model);
  emit("change", model, selectedMaterial.value, model);
};
</script>

<style lang="scss" scoped>
.xen-material-picker {
  width: 100%;

  .picker-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      background-color: #f0f0f0;
      border-color: #7881de;
    }

    .selected-text {
      flex: 1;
      font-size: 14px;
      color: #333;
    }

    .placeholder {
      flex: 1;
      font-size: 14px;
      color: #999;
    }
  }

  .material-list-popup,
  .material-detail-popup {
    width: 90vw;
    max-width: 600px;
    height: 80vh;
    max-height: 800px;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
  }
}
</style>
